<!--
 * @Author: lc
 * @Date: 2019-09-24 14:25:18
 * @LastEditors: ranli
 * @LastEditTime: 2019-09-29 17:27:53
 * @Description: 富文本组件
 -->
<template>
  <div>
    <!-- <Editor v-model="myValue"
      :init="newOption"
      :disabled="disabled"
       @onClick="onClick" //自定义事件
     >
    </Editor> -->
    <Editor v-model="myValue"
      :init="newOption"
      :disabled="disabled">
    </Editor>
  </div>
</template>
<script>
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver";
import axios from "axios";

export default {
  name: "BD-editor",
  components: { Editor },
  props: {},
  data() {
    return {
      myValue: this.value,
      //默认的配置
      option: {
        language_url: "/tinymce/langs/zh_CN.js",
        language: "zh_CN",
        skin_url: "/tinymce/skins/ui/oxide",
        // skin_url: '/tinymce/skins/ui/oxide-dark',//暗色系
        height: 300,
        plugins: "lists preview image media table wordcount link hr pagebreak ",
        toolbar:
          "undo redo | formatselect  fontselect fontsizeselect| bold italic subscript superscript forecolor backcolor underline strikethrough  link  blockquote  emoticons hr pagebreak    | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image  table | removeformat preview ",
        branding: false,
        menubar: false,
        fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
        //上传图片回调
        images_upload_handler: (blobInfo, succ, fail) => {
          //验签方法
          let {
            uploadParams,
            timeout,
            baseURL,
            headers,
            methods,
            success,
            controller
          } = this.option.uploadImg;
          //拼接参数
          let obj = uploadParams([
            {
              label: "img_file",
              value: blobInfo.blob()
            }
          ]);
          // 创建实例时设置配置的默认值
          const Service = axios.create({
            timeout: timeout,
            baseURL: baseURL,
            headers: headers
          });
          Service[methods](controller, obj)
            .then(res => {
              success(res, succ, fail);
            })
            .catch(err => {
              fail("上传失败");
            });
        }
      }
    };
  },
  props: {
    value: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    initOption: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  mounted() {
    tinymce.init({});
  },
  methods: {
    // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    // 需要什么事件可以自己增加
    // onClick(e) {
    //   this.$emit("onClick", e, tinymce);
    // },
    clear() {
      this.myValue = "";
    }
  },
  computed: {
    newOption() {
      return Object.assign(this.option, this.initOption);
    }
  },
  watch: {
    value(newValue) {
      this.myValue = newValue;
    },
    myValue(newValue) {
      this.$emit("input", newValue);
    }
  }
};
</script>

<style scoped>
.paging-panel {
  padding: 20px 0;
}
</style>
